(function() {
    angular.module('KtotApp').directive('modalDropdown', ['$timeout', function($timeout) {
        function link(scope, element, attrs, ctrl) {
            var $modal;
            
            function closeModal() {
                if(!$modal) {
                    return;
                }  
                
                $modal.removeClass('active');
                $timeout(function() {
                    $modal.remove();
                    $modal = null;
                }, 200);
            }; 
                
            function createModal() {
                $modal = $('<div class="modal">' +
                '<header class="bar bar-nav">' +
                '<a class="icon icon-close pull-right"></a>' +
                '<h1 class="title"></h1>' +
                '</header>' +
                '<div class="content">' +
                '<div class="content-padded">' +
                '<div class="card">' +
                '<ul class="table-view">' +
                
                '</ul>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>');
                
                $('body').append($modal);
                updateCaption();
                updateItems();
                $modal.find('a').on('click', closeModal);
                $timeout(function() {
                    $modal.addClass('active');
                }, 100);
            }
            
            function itemClicked(event) {
                  scope.selectedItem = scope.items[$(this).index() - 1];
                  closeModal();
            };
            
            function updateItems() {
                if(!$modal) {
                    return;
                }
                
                var $ul = $modal.find('ul');
                $ul.html('');
                scope.items.forEach(function(it) {
                    var $li = $('<li class="table-view-cell"></li>');
                    $li.text(it);
                    $li.on('click', itemClicked);
                    $ul.append($li); 
                });
                
                $ul.prepend($('<li class="table-view-cell">').text(scope.optionsText).on('click', function() { 
                    scope.selectedItem = undefined;
                    closeModal();
                }));
            }
            
            function updateCaption() {
                if(!$modal) {
                    return;
                }
                
                $modal.find('h1').text(scope.caption);
            }

            

            function updateSelectedItem() {
                element.text(scope.selectedItem || scope.optionsText);
            }

            scope.$watch('selectedItem', updateSelectedItem);

            scope.$watch('caption', updateCaption);
            
            scope.$watch('items', updateItems);

            element.on('click', createModal);
        }

        return {
            scope: {
                optionsText: '=',
                caption: '=',
                items: '=',
                selectedItem: '='
            },
            link: link
        };
    }]);
})();